<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
    <TITLE>how to inherit and change style</TITLE>
    <script type="text/javascript" src="./oGrid.js"></script>
    <link type="text/css" rel="stylesheet" href="oGrid.css" />
    <style type="text/css">
        .oGrid {border:0px;border-collapse:collapse;}
        .oGrid tr {border-bottom:0px solid #000; }
        .oGrid td, th{border:0px;}
        .oGrid hr {
            background-color: #FFE424;
            color: #FFE424;
            height: 1px;
            border: 0px;
            clear: both;
        }
    </style>

    <SCRIPT language="javascript">
        var rawData = { "total": 10, 
        "rows": [
            { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
            { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 28.50, "attr1": "Venomless", "itemid": "EST-11" },
            { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
            { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
            { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 63.50, "attr1": "Adult Female", "itemid": "EST-16" },
            { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
            { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
        ]
        };

    var params = {
        "columns": [{ "field": "productid", "title": "product id", "width": 100 }, { "field": "itemid", "title": "item id", "width": 300}]
        };
        function myList2(fcontainer) {
            this.base = obj4u.oGrid;
            this.base(fcontainer, params);

            var oldrenderRow = this.renderRow;
            this.renderRow = function (rowElement, row) {
                oldrenderRow.call(this, rowElement, row);

                rowElement = this.container.insertRow(this.container.rows.length);
                cell = rowElement.insertCell(0);
                cell.setAttribute("colspan", this.columns.length);
                var hr = document.createElement("hr");
                cell.appendChild(hr);
            }
        };
        var obj;
        window.onload = function () {
            obj = new myList2(dataTable);
            obj.loadData(rawData);
            obj.renderData();
            obj.event.AddEvent("onSelectedRow", oGrid_SelectedRow);
        }

        function oGrid_SelectedRow(rowElement, row) {
            alert("price is " + row["listprice"]);
        }
    </SCRIPT>
</HEAD>
<BODY>

    <TABLE id="dataTable">
    </TABLE>
 
</BODY>
</HTML>